<template>
<div class="good-list">
    <Form :model="formItem" ref="formItem" :inline="true" action="javascript:void(0)">
        <FormItem>
            <Select v-model="formItem.shopid" :style="{'width':'160px'}" clearable>
                <Option v-for="item in shoplist" :value="item.id" :key="item.id">{{ item.shopname }}</Option>
            </Select>
        </FormItem>
        <FormItem>
            <Select v-model="formItem.is_onsale" :style="{'width':'160px'}" clearable>
                <Option value="1">在售</Option>
                <Option value="0">下架</Option>
            </Select>
        </FormItem>
        <FormItem>
            <Input v-model="formItem.key" placeholder="输入关键词查找..."></Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="renderTable('formItem')">查找</Button>
        </FormItem>
        <FormItem style="float:right">
            <Button style="margin-left: 8px" type="warning" @click="syncGood('formItem')">同步店铺商品</Button>
        </FormItem>
    </Form>
    <Table border ref="goodlist" :columns="list" :data="tablelist" :loading="dataloading">
        <template slot-scope="{ row }" slot="title">
            <div class="clearfix" style="padding:10px;">
                <img :src="row.thumb_url" width="120" height="auto" alt="" class="f-l" style="padding:10px;background:#eee;margin-right:10px;">
                <h4>{{ row.goods_name }}</h4>
                <Tag color="geekblue" class="mt5">{{ row.shop['shopname'] }}</Tag>
                <p class="mt5">
                    <Tag color="default" v-for="item in row.spec" :value="item.id" :key="item.id">{{ item.spec }}</Tag>
                </p>
            </div>
        </template>
        <template slot-scope="{ row }" slot="is_onsale">
            <Tag color="green" v-if="row.is_onsale">在售</Tag>
            <Tag color="volcano" v-if="row.is_onsale == false">停售</Tag>
        </template>
        <template slot-scope="{ row }" slot="is_more_sku">
            <Tag color="green" v-if="row.is_more_sku">多规格</Tag>
            <Tag color="volcano" v-if="row.is_more_sku == false">单规格</Tag>
        </template>
        <template slot-scope="{ row }" slot="action">
            <Button type="info" size="small" style="margin-right: 5px;float:left" @click="showSupplier(row.id)">供应商</Button>
            <Button type="primary" size="small" style="margin-right: 5px;float:left" @click="showSpec(row.id)">规格</Button>
        </template>
    </Table>
    <!-- 分页 -->
    <div class="table-page">
        <Page size="small" ref="listPage" :total="pages.total" :current="pages.current" :page-size="pages.size" show-elevator show-total @on-change="changePage"></Page>
    </div>
    <!-- 供应商的弹出 -->
    <Drawer :closable="true" :mask-closable="true" :scrollable="true" title="供应商对应商品名称" width="840" v-model="showSupplierStatus">
        <div class="action-btn">
            <Button size="small" @click="showCreateSupplierGoodName" type="success">添加供应商名称</Button>
        </div>
        <Table border ref="goodsuppliername" :columns="goodsuppliername" :data="goodSupplierList" :loading="supplierloading">
            <template slot-scope="{ row }" slot="supplier">
                {{ row.supplier['suppliername'] }}
            </template>
            <template slot-scope="{ row,index }" slot="action">
                <Button type="info" size="small" style="margin-right: 5px;float:left" @click="showGoodSupplierEditModel(row.id)">编辑</Button>
                <Button type="error" size="small" @click="removeGoodSupplier(index,row.id)">删除</Button>
            </template>
        </Table>
    </Drawer>
    <Drawer :closable="false" :mask-closable="false" :scrollable="true" title="添加供应商名称" width="640" v-model="showCreateSupplierStatus">
        <Spin size="large" fix v-if="loading"></Spin>
        <Form :model="goodSupplier" ref="" label-position="right" :label-width="80" action="javascript:void(0)">
            <FormItem label="供应商" prop="supplier_id">
                <Select v-model="goodSupplier.supplier_id" :style="{'width':'240px'}" clearable>
                    <Option v-for="item in supplierlist" :value="item.id" :key="item.id">{{ item.suppliername }}</Option>
                </Select>
            </FormItem>
            <FormItem label="商品名称" prop="good_name">
                <Input v-model="goodSupplier.good_name" placeholder="输入商品名称..."></Input>
            </FormItem>
            <FormItem>
                <Button style="margin-right: 8px" @click="showCreateSupplierStatus = false">取消</Button>
                <Button type="primary" @click="createSupplierGoodName()">提交</Button>
            </FormItem>
        </Form>
    </Drawer>
    <Drawer :closable="false" :mask-closable="false" :scrollable="true" title="修改供应商名称" width="640" v-model="showEditSupplierStatus">
        <Spin size="large" fix v-if="loading"></Spin>
        <Form :model="goodSupplier" ref="" label-position="right" :label-width="80" action="javascript:void(0)">
            <FormItem label="商品名称" prop="good_name">
                <Input v-model="goodSupplier.good_name" placeholder="输入商品名称..."></Input>
            </FormItem>
            <FormItem>
                <Button style="margin-right: 8px" @click="showEditSupplierStatus = false">取消</Button>
                <Button type="primary" @click="editSupplierGoodName()">提交</Button>
            </FormItem>
        </Form>
    </Drawer>
    <!-- 规格的弹出 -->
    <Drawer :closable="true" :mask-closable="true" :scrollable="true" title="规格信息" width="1440" v-model="showSpecModalStatus">
        <div class="action-btn">
            <Button size="small" @click="showCreateSupplierGoodSpec" type="success">添加供应商规格名称</Button>
        </div>
        <Table border ref="speclist" :columns="speclist" :data="tableSpeclist" :loading="specloading">
            <template slot-scope="{ row }" slot="sku_id">
                {{ row.goodspec['sku_id'] }}
            </template>
            <template slot-scope="{ row }" slot="good_spec">
                {{ row.goodspec['spec'] }}
            </template>
            <template slot-scope="{ row }" slot="supplier">
                {{ row.supplier['suppliername'] }}
            </template>
            <template slot-scope="{ row }" slot="onsale">
                <Tag color="green" v-if="row.goodspec['is_sku_onsale'] == 1">在售</Tag>
                <Tag color="volcano" v-if="row.goodspec['is_sku_onsale'] == 0">停售</Tag>
            </template>
            <template slot-scope="{ row,index }" slot="action">
                <Button type="info" size="small" style="margin-right: 5px;float:left" @click="showEditSupplierGoodSpec(row.id)">编辑</Button>
                <Button type="error" size="small" @click="removeSupplierSpec(index,row.id)">删除</Button>
            </template>
        </Table>
    </Drawer>
    <Drawer :closable="false" :mask-closable="false" :scrollable="true" title="添加供应商规格名称" width="640" v-model="showCreateSupplierSpecStatus">
        <Spin size="large" fix v-if="loading"></Spin>
        <Form :model="goodSpecSupplier" ref="" label-position="right" :label-width="80" action="javascript:void(0)">
            <FormItem label="供应商" prop="supplier_id">
                <Select v-model="goodSpecSupplier.supplier_id" :style="{'width':'240px'}" clearable>
                    <Option v-for="item in supplierlist" :value="item.id" :key="item.id">{{ item.suppliername }}</Option>
                </Select>
            </FormItem>
            <FormItem label="规格" prop="good_spec_id">
                <Select v-model="goodSpecSupplier.good_spec_id" :style="{'width':'240px'}" clearable>
                    <Option v-for="item in goodspeclist" :value="item.id" :key="item.id">{{ item.spec }}</Option>
                </Select>
            </FormItem>
            <FormItem label="规格名称" prop="spec">
                <Input v-model="goodSpecSupplier.spec" placeholder="输入规格名称..."></Input>
            </FormItem>
            <FormItem label="进货价" prop="price">
                <InputNumber v-model="goodSpecSupplier.price" placeholder="输入规格名称..."></InputNumber>
            </FormItem>
            <FormItem label="运费" prop="shipping">
                <InputNumber v-model="goodSpecSupplier.shipping" placeholder="输入运费..."></InputNumber>
            </FormItem>
            <FormItem>
                <Button style="margin-right: 8px" @click="showCreateSupplierSpecStatus = false">取消</Button>
                <Button type="primary" @click="createSupplierSpec()">提交</Button>
            </FormItem>
        </Form>
    </Drawer>
    <Drawer :closable="false" :mask-closable="false" :scrollable="true" title="添加供应商规格名称" width="640" v-model="showEditSupplierSpecStatus">
        <Spin size="large" fix v-if="loading"></Spin>
        <Form :model="goodSpecSupplier" ref="" label-position="right" :label-width="80" action="javascript:void(0)">
            <FormItem label="规格名称" prop="spec">
                <Input v-model="goodSpecSupplier.spec" placeholder="输入规格名称..."></Input>
            </FormItem>
            <FormItem label="进货价" prop="price">
                <InputNumber v-model="goodSpecSupplier.price" placeholder="输入进货价..."></InputNumber>
            </FormItem>
            <FormItem label="运费" prop="shipping">
                <InputNumber v-model="goodSpecSupplier.shipping" placeholder="输入运费..."></InputNumber>
            </FormItem>
            <FormItem>
                <Button style="margin-right: 8px" @click="showEditSupplierSpecStatus = false">取消</Button>
                <Button type="primary" @click="editSupplierSpec()">提交</Button>
            </FormItem>
        </Form>
    </Drawer>
</div>
</template>

<script>
export default {
    name: 'Good',
    data() {
        return {
            loading:false,
            dataloading: false,
            specloading:false,
            supplierloading:false,
            showSpecModalStatus:false,
            showSupplierStatus:false,
            formItem: {
                'shopid': '',
                'is_onsale':'1',
                'key': ''
            },
            pages: {
                current: 1,
                total: 0,
                size: 10
            },
            list: [
                {
                    title: '简介',
                    minWidth: 260,
                    slot: 'title',
                },
                {
                    title: '在售',
                    width: 100,
                    slot: 'is_onsale',
                },
                {
                    title: '多规格',
                    width: 100,
                    slot: 'is_more_sku',
                },
                {
                    title: '操作',
                    slot: 'action',
                    width: 150
                }
            ],
            tablelist: [],
            speclist: [
                {
                    title: 'skuID',
                    width: 140,
                    slot: 'sku_id',
                },
                {
                    title: '规格',
                    slot: 'good_spec',
                    minWidth:300,
                },
                {
                    title: '供应商',
                    slot: 'supplier',
                    width:150,
                },
                {
                    title: '供应商规格',
                    key: 'spec',
                    minWidth:300,
                },
                {
                    title: '供应商价格',
                    width: 130,
                    key: 'price',
                },
                {
                    title: '运费',
                    width: 100,
                    key: 'shipping',
                },
                {
                    title: '状态',
                    width: 100,
                    slot: 'onsale',
                },
                {
                    title: '操作',
                    slot: 'action',
                    width: 180
                }
            ],
            tableSpeclist: [],
            goodspeclist:[],
            shoplist:[],
            supplierlist:[],
            goodsuppliername:[
                {
                    title: '供应商名称',
                    width: 200,
                    slot:'supplier',
                },
                {
                    title: '商品名',
                    minWidth: 100,
                    key: 'good_name',
                },
                {
                    title: '操作',
                    slot: 'action',
                    width: 180
                }
            ],
            goodSupplierList:[],
            goodsupplier_id:0,
            goodSupplier:{
                supplier_id:0,
                good_id:0,
                good_name:'',
            },
            showCreateSupplierStatus:false,
            showEditSupplierStatus:false,
            showCreateSupplierSpecStatus:false,
            showEditSupplierSpecStatus:false,
            good_spec_supplier_id:0,
            goodSpecSupplier:{
                supplier_id:0,
                good_id:0,
                good_spec_id:0,
                spec:'',
                price:0,
                shipping:0,
            },
        }
    },
    created: function() {
        // 取数据
        this.getTableList();
        this.$api.shop.list({page:1,size:100000}).then(res => {
            if (res.code == 200) {
                this.shoplist = res.result.list;
            }
        });
        this.$api.supplier.list({page:1,size:100000}).then(res => {
            if (res.code == 200) {
                this.supplierlist = res.result.list;
            }
        });
    },
    // 组件
    components: {
    },
    methods: {
        changePage() {
            this.pages.current = this.$refs['listPage'].currentPage;
            this.getTableList();
        },
        getTableList: function() {
            var params = { page: this.pages.current,'size':this.pages.size,'is_onsale': this.formItem.is_onsale};
            this.dataloading = true;
            this.$api.good.list(params).then(res => {
                this.dataloading = false;
                if (res.code == 200) {
                    this.tablelist = res.result.list;
                    this.pages.total = res.result.total
                    this.$Message.success(res.message);
                }
            });
            return;
        },
        // 筛选
        renderTable: function(name) {
            this.dataloading = true;
            this.pages.currentPage = 1;
            var ps = { 'shopid': this.formItem.shopid,'is_onsale': this.formItem.is_onsale,'key': this.formItem.key,'page':1 ,size:this.pages.size};
            this.$api.good.list(ps).then(res => {
                this.dataloading = false;
                if (res.code == 200) {
                    this.tablelist = res.result.list;
                    this.pages.total = res.result.total
                    this.$Message.success(res.message);
                }
            });
            return;
        },
        syncGood: function(name) {
            this.dataloading = true;
            this.pages.currentPage = 1;
            var ps = {'shopid': this.formItem.shopid};
            this.$api.good.sync(ps).then(res => {
                this.dataloading = false;
                if (res.code == 200) {
                    this.getTableList();
                    this.$Message.success(res.message);
                }
            });
            return;
        },
        showSupplier:function(id){
            this.showSupplierStatus = !this.showSupplierStatus;
            this.good_id = id;
            this.goodSupplier.good_id = id;
            this.getSupplierList(id);
        },
        getSupplierList:function (id) {
            this.supplierloading = true;
            this.$api.good.gnlist({'good_id':id}).then(res => {
                this.supplierloading = false;
                if (res.code == 200) {
                    this.goodSupplierList = res.result;
                    this.$Message.success(res.message);
                }
            });
        },
        showCreateSupplierGoodName:function(){
            this.showCreateSupplierStatus = !this.showCreateSupplierStatus;
        },
        createSupplierGoodName:function(){
            this.loading = true;
            this.$api.good.gncreate(this.goodSupplier).then(res => {
                if (res.code == 200) {
                    this.getSupplierList(this.goodSupplier.good_id);
                    this.showCreateSupplierStatus = !this.showCreateSupplierStatus;
                }
                this.loading = false;
            }).finally(res => {
                this.loading = false;
            });
        },
        showGoodSupplierEditModel:function(id){
            this.showEditSupplierStatus = !this.showEditSupplierStatus;
            this.loading = true;
            this.$api.good.gndetail({'good_supplier_id':id}).then(res => {
                if (res.code == 200) {
                    this.goodSupplier = res.result;
                    this.goodSupplier.good_supplier_id = id;
                }
                this.loading = false;
            }).finally(res => {
                this.loading = false;
            });
        },
        editSupplierGoodName:function(){
            this.loading = true;
            this.$api.good.gnedit(this.goodSupplier).then(res => {
                if (res.code == 200) {
                    this.getSupplierList(this.goodSupplier.good_id);
                    this.showEditSupplierStatus = !this.showEditSupplierStatus;
                }
                this.loading = false;
            }).finally(res => {
                this.loading = false;
            });
        },
        removeGoodSupplier:function(index,id){
            // 弹出确认框
            this.$Modal.confirm({
                title: '警告',
                content: '<p>此操作不可恢复，三思而后行...</p>',
                onOk: () => {
                this.$api.good.gnremove({ good_supplier_id: id }).then(res => {
                    if (res.code == 200) {
                        this.$Message.success(res.message);
                        this.goodSupplierList.splice(index, 1);
                    }
                });
                }
            });
        },
        getSpecList:function (id) {
            this.specloading = true;
            this.$api.good.snlist({'good_id':id}).then(res => {
                this.specloading = false;
                if (res.code == 200) {
                    this.tableSpeclist = res.result;
                    this.$Message.success(res.message);
                }
            });
            this.$api.good.speclist({'good_id':id}).then(res => {
                if (res.code == 200) {
                    this.goodspeclist = res.result;
                }
            });
        },
        showSpec:function(id){
            this.showSpecModalStatus = !this.showSpecModalStatus;
            this.getSpecList(id);
            this.good_id = id;
            this.goodSpecSupplier.good_id = id;
        },
        showCreateSupplierGoodSpec:function(){
            this.showCreateSupplierSpecStatus = !this.showCreateSupplierSpecStatus;
            this.goodSpecSupplier.supplier_id = 0;
            this.goodSpecSupplier.good_spec_id = 0;
            this.goodSpecSupplier.spec = '';
            this.goodSpecSupplier.price = 0;
        },
        createSupplierSpec:function(){
            this.loading = true;
            this.$api.good.sncreate(this.goodSpecSupplier).then(res => {
                if (res.code == 200) {
                    this.getSpecList(this.good_id);
                    this.showCreateSupplierSpecStatus = !this.showCreateSupplierSpecStatus;
                }
                this.loading = false;
            }).finally(res => {
                this.loading = false;
            });
        },
        showEditSupplierGoodSpec:function(id){
            this.showEditSupplierSpecStatus = !this.showEditSupplierSpecStatus;
            this.loading = true;
            this.$api.good.sndetail({'good_spec_supplier_id':id}).then(res => {
                if (res.code == 200) {
                    this.goodSpecSupplier = res.result;
                    this.goodSpecSupplier.good_spec_supplier_id = id;
                }
                this.loading = false;
            }).finally(res => {
                this.loading = false;
            });
        },
        editSupplierSpec:function(){
            this.loading = true;
            this.$api.good.snedit(this.goodSpecSupplier).then(res => {
                if (res.code == 200) {
                    this.getSpecList(this.good_id);
                    this.showEditSupplierSpecStatus = !this.showEditSupplierSpecStatus;
                }
                this.loading = false;
            }).finally(res => {
                this.loading = false;
            });
        },
        removeSupplierSpec:function(index,id){
            // 弹出确认框
            this.$Modal.confirm({
                title: '警告',
                content: '<p>此操作不可恢复，三思而后行...</p>',
                onOk: () => {
                this.$api.good.snremove({ good_spec_supplier_id: id }).then(res => {
                    if (res.code == 200) {
                        this.$Message.success(res.message);
                        this.tableSpeclist.splice(index, 1);
                    }
                });
                }
            });
        },
    }
}
</script>
